<template>
  <div class="document-manager" :style="{ right: `${sliderRight}px` }">
    <div class="slide-toggle" @click="toggleSlider">
      <template v-if="sliderRight === -211">
        <a-icon type="caret-left" />
      </template>
      <template v-else>
        <a-icon type="caret-right" />
      </template>
      我的课件
    </div>
    <div class="slider-wraper">
      <span class="white-board-title">白板</span>
      <div class="white-board__set" @click="documentEmpty"></div>
      <div id="catalogue" class="doc-container">
        <div class="placeholder"></div>
      </div>
      <div class="btn-manage-doc">
        <a-button type="primary" block @click="documentManag"
          >管理课件</a-button
        >
      </div>
    </div>
  </div>
</template>

<script>
let eventEmitter = BJY.eventEmitter;

export default {
  components: {},
  data() {
    return {
      catalogue: null,
      sliderRight: 0
    };
  },
  computed: {},
  watch: {},
  methods: {
    toggleSlider() {
      console.log(this.sliderRight, typeof this.sliderRight);
      this.sliderRight = this.sliderRight === 0 ? -211 : 0;
    },
    documentEmpty() {
      eventEmitter.trigger("ZWZ_DOCUMENT_EMPTY");
    },
    documentManag() {
      eventEmitter.trigger("ZWZ_DOCUMENT");
    }
  },
  created() {
    let that = this;
    eventEmitter.one(eventEmitter.DOC_ALL_REQ, function(event, data) {
      that.catalogue = BJY.Catalogue.create({
        element: $("#catalogue .placeholder"),
        thumbnailWidth: 100
      });
    });
    eventEmitter.on(eventEmitter.OPEN_DOC_IN_CATALOGUE, function(event, data) {
      that.catalogue.togglePageList(true, data.docId);
    });
    eventEmitter.on("ZWZ_DOCUMENT_EMPTY.yxp", function(event, data) {
      that.catalogue.changePage(2, 0);
    });
  },
  mounted() {},
  beforeDestroy() {
    this.catalogue && this.catalogue.destroy && this.catalogue.destroy();
  }
};
</script>

<style lang="less">
//@import url(); 引入公共css类
/*白板样式*/
.document-manager {
  position: absolute;
  background-color: #ebebeb;
  right: 0;
  height: 100%;
  width: 221px;
  transition: right 0.3s;
  .slide-toggle {
    position: absolute;
    left: -24px;
    top: 200px;
    width: 24px;
    padding: 13px 6px;
    border-radius: 6px 0 0 6px;
    background-color: #ebebeb;
    cursor: pointer;
  }
  .slider-wraper {
    height: 100%;
    padding: 12px 15px;
    background-color: #ebebeb;
    position: relative;

    .white-board__set {
      position: relative;
      height: 124px;
      background-color: #fff;
      border: 1px solid #ccc;
      &:hover {
        border-color: #9e9e9e;
        box-shadow: 0 0 1px 1px rgba(100, 100, 100, 0.3);
        background-color: #9d9d9d;
      }
      &::after {
        content: "";
        position: absolute;
        bottom: -20px;
        width: 100%;
        height: 1px;
        background-color: #ccc;
      }
    }
    .doc-container {
      position: absolute;
      height: calc(100% - 250px);
      top: 184px;
      left: 0;
      right: 0;
      bottom: 0;
      .placeholder {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
    .btn-manage-doc {
      position: absolute;
      padding: 0 13px;
      bottom: 20px;
      left: 0;
      right: 0;
    }
  }
}
</style>
